<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="dist/css/layui.css"  media="all">
	<link rel="stylesheet" type="text/css" href="css/table.css"/>
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body> 
 
<div class="demoTable layui-form">
  <div class="demoTable">
    批次号：
    <div class="layui-inline">
			<select name="quiz3" data-type="reload" id="demoReload">
				<option value="">请选择批次</option>
				<option value="西湖区">2020-11-12-6-7</option>
				<option value="余杭区">2020-11-12-6-5</option>
				<option value="拱墅区">2020-11-12-6-9</option>
			</select>
    </div>
    <!-- <button class="layui-btn" data-type="reload">搜索</button> -->
		<div class="layui-btn-container">
		  <button class="layui-btn layui-btn-sm query">查询</button>
		  <button class="layui-btn layui-btn-sm submit">提交</button>
		  <button class="layui-btn layui-btn-sm stop">停止</button>
			<button class="layui-btn layui-btn-sm stop">清除</button>
		</div>
  </div>
   
  <table class="layui-hide" id="table_1" lay-filter="user_1"></table>
  <ul>
  	<li>
			<span class="input-title">纠正</span>
			<input type="checkbox" name="GF-2-1" lay-skin="primary" title="辐射纠正">
			<input type="checkbox" name="GF-2-1" lay-skin="primary" title="大气纠正">
			<input type="checkbox" name="GF-2-1" lay-skin="primary" title="正射纠正">
			<input type="checkbox" name="GF-2-1" lay-skin="primary" title="地形纠正">
		</li>
		<li>
			<span class="input-title">图斑</span>
			<input type="checkbox" name="GF-2-1" lay-skin="primary" title="植被">
			<input type="checkbox" name="GF-2-1" lay-skin="primary" title="大气纠正">
			<input type="checkbox" name="GF-2-1" lay-skin="primary" title="正射纠正">
			<input type="checkbox" name="GF-2-1" lay-skin="primary" title="地形纠正">
		</li>
  </ul>             
</div>          
<script src="dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('table', function(){
  var table = layui.table;
  //分景处理表格
  table.render({
      elem: '#table_1'
      ,url: 'data/layers/table.json',// 'http://118.178.140.168:8888/map/data/layers/table.json'
  		method:'GET',
  		dataType:'json',
  		parseData: function(res){ //res 即为原始返回的数据
  		    return {
  		      "status": res.status, 
  		      "total": res.total, 
  					"msg":res.msg,
  		      "data": res.data
  		    };
  		  },
  		response: {
  				statusName: 'status' //规定数据状态的字段名称，默认：code
  				,statusCode: 200 //规定成功的状态码，默认：0
  				,countName: 'total' //规定数据总数的字段名称，默认：count
  				,dataName: 'data' //规定数据列表的字段名称，默认：data
  			}
      ,cols: [[
        {checkbox: true, fixed: true}
        ,{field:'filename', title: '文件名', width:180}
        ,{field:'sensor', title: '传感器', width:70}
        ,{field:'time', title: '拍摄时间', width:100, sort: true}
        ,{field:'cloud', title: '云量', width:100,sort: true}
        ,{field:'angle', title: '倾角', sort: true, width:80}
        ,{field:'status', title: '状态',  width:80}
        ,{field:'grade', title: '等级', width:80}
        
      ]]
      
      ,page: false
      ,height: 310
    });
  
  
  var $ = layui.$, active = {
    reload: function(){
      var demoReload = $('#demoReload');
      
      //执行重载
      table.reload('testReload', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          key: {
            id: demoReload.val()
          }
        }
      }, 'data');
    }
  };
  
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});
</script>

</body>
</html>